<script lang="tsx">
import {Component, Vue} from 'vue-property-decorator'

@Component
export default class App extends Vue {
    foo = 123

    // 会执行构造器，就表示Vue背后反射创建了实例
    constructor() {
        super();
        console.log("构造器")
    }

    bar1 = () => {
        // `this` 值实际上不是 Vue 实例。
        // 因为 Lambda 表达式没有自己的this，用的上一级的this对象
        this.foo = 456888  // 这样修改不是响应式的
        console.log(this) // 所以这个this是App对象
        return ""
    }

    /**
     * Vue 类组件通过在幕后实例化原始构造函数来收集类属性作为 Vue 实例数据。
     */
    bar2 = function (this: any){
        // 不更新预期的属性。
        this.foo = 456111
        console.log(this) // 这样的this，由于有自己的this，所以vue背后把this对象给修改成了组件的对象
        return ""
    }


    bar() {
        // 正确更新预期的属性。
        this.foo = 113
        /*这里会调用两次，第一次是渲染虚拟dom，第二次解析的时候，是渲染真实dom*/
        console.log(this) // 这个this 是VueComponent
        return ""
    }

    render() {
        return (
            <div>
                {this.foo}
                <h2>我是App组件</h2>
                <br/>

                {this.bar1()}
                {this.bar2()}
                {/*这里会调用两次，第一次是渲染虚拟dom，第二次解析的时候，是渲染真实dom*/}
                {this.bar()}

            </div>
        )
    }
}
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
